<template>
  <transition name="slide">
    <div class="rest-password-next">
      <div class="rest-box">
        <div class="head"><span class="logo mid"></span>  <span class="sign-up" @click="SignInFn">Sign in</span></div>
        <h1 class="title">Reset Your Password</h1>
        <div class="input-box" v-show="newPwd">
          <div class="icon-box">
            <input type="text" class="pwd pwd1" placeholder="Password" autocorrect="off" autocomplete="off"
                   v-model="uppassword" @blur="uppasswordReg" @input="uppasswordWatch" @focus="clearErrorInfo">
            <p class="errorInfo" ref="errorInfo" v-html="pwdErrorInfo"></p>
          </div>
          <div class="icon-box icon-box1">
            <input type="text" class="pwd pwd2" placeholder="Confirm Password"  autocorrect="off" autocomplete="off"
                   v-model="cfpassword" @keyup.enter="changeNext">
            <p class="errorInfo" ref="errorInfo1" v-html="pwdErrorInfo1"></p>
          </div>
          <button class="btn sub" @click="changeNext">submit</button>
        </div>
        <div class="rest-success" v-show="signIn">
          <p>Congratulations!</p>
          <p>Dear user</p>
          <p>your account password has been reset.</p>
          <p>Please sign in again.</p>
          <button class="btn sign" @click="SignInFn" >Sign In</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import {RestPassword} from 'api/rest-password'
  import {mapMutations} from 'vuex'
  export default {
    data(){
      return{
        uppassword : '',
        cfpassword : '',
        pwdErrorInfo:'',
        pwdErrorInfo1:'',
        canSubmit: false,
        newPwd : true ,
        signIn : false,
        userId : '',
        code : '',
      }
    },
    created(){
      this.userId= this.$route.query.userId;
      this.code = this.$route.query.code;
    },
    methods:{
      clearErrorInfo(){
        this.pwdErrorInfo=''
        this.pwdErrorInfo1=''
      },
      uppasswordReg(){
        this.uppasswordWatch()
      },
      uppasswordWatch(){
        if(this.uppassword.trim() === ''){
          this.pwdErrorInfo = 'please enter';
          this.canSubmit = false;
        }else if(!/[a-z]/.test(this.uppassword.trim())){
          this.pwdErrorInfo = 'lowercase letters'
          this.canSubmit = false
        }else if (!/.{8,}/.test(this.uppassword.trim())){
          this.pwdErrorInfo = '8 or more characters'
          this.canSubmit = false
        }else if(!/[0-9]/.test(this.uppassword.trim())){
          this.pwdErrorInfo = 'At least one number'
          this.canSubmit = false
        }else{
          this.pwdErrorInfo=''
          this.canSubmit = true
        }
      },
      changeNext(){
        if(this.canSubmit === false ){
          return
        }
        if(this.cfpassword.trim() === ''){
          this.pwdErrorInfo1 = 'please enter';
          return
        }
        if(this.uppassword.trim() !== this.cfpassword.trim()){
          this.pwdErrorInfo1 = 'Two passwords don\'t match';
          return
        }
        this.pwdErrorInfo1 = '';
        //调用修改密码接口
        let data = {
          "code": this.code,
          "userId": this.userId,
          "newPassword": this.uppassword.trim()
        }
        this.setRouteLoading(true)
        RestPassword(data).then((res) => {
          this.setRouteLoading(false)
          this.signIn = true;
          this.newPwd = false;
        });
      },
      SignInFn(){
          this.$router.push({
            path: `/sign-in/`
          });
        },
      ...mapMutations({
        setRouteLoading : 'SET_ROUTE_LOADING'
      })
    },

    watch:{
      '$route'(to,from){
        const data = this.$router.currentRoute.fullPath.split('?');
        if(to.path ==='/sign-in'){
        }else{
          this.setSignUpVal(0)
        }
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"
  .slide-enter-active, .slide-leave-active
    transition: all 0.3s

  .slide-enter, .slide-leave-to
    transform: translate3d(100%, 0, 0)
  .btn
    width:100%;
    height:3.5rem
    line-height 3.5rem
    background #18823a
    font-size:18px
    text-align center
    color:#fff
    border:none
    margin-top: 4rem
    border-radius:2px
    cursor:pointer
  .rest-password-next
    background: $color-white
    color #333
    width:520px
    height:575px
    margin: 0 auto ;
    .rest-box
      padding:0 8%
    .head
      text-align center
      position relative
      height: 4.5rem;
      line-height: 4.5rem;
      color #18823a
      font-size:16px
      .mid
        vertical-align: middle
      .logo
        display:inline-block
        width: 100%
        height 1.6rem
        color: #ffffff
        background url(logo.png) no-repeat center center
        background-size auto 100%
      .sign-up
        position absolute
        left:0
        top:0
        color #2f4bf7
        cursor:pointer
    .title
      margin: 4rem 0
      text-align center
      font-size:20px
    .input-box
      .icon-box
        position:relative
        .pwd
          font-size: 14px;
          padding-left 3%
          width:96.8%
          border:none
          border-bottom 1px solid #ddd
          height:3.5rem
          line-height: 3.5rem
          position:relative
          background: transparent;
        .sub
          margin-top 3.5rem
        .pwd2
          margin-top: 2rem
        .errorInfo
          position:absolute
          left:0
          bottom: -1.2rem;
          color: #fa4c4d;
          font-size: 12px;
      .icon-box:before
        position: absolute;
        right: 23px;
        top: 19px;
        content: "";
        background-image: url(../../../static/img/cashback-icon.png);
        background-repeat: no-repeat;
        background-size: 140px;
        background-position: -105px -23px;
        width: 18px;
        height: 18px;
      .icon-box1:before
        top:calc(19px + 2rem)
    .rest-success
      text-align center
      font-size:17px;
      line-height: 2rem
      .sign
        margin-top: 4rem

</style>
